<template>
	<view>
		<view class="outcome">

			<view class="search">
				<view class="search-type" @click="show=!show">
					<text>{{type.text}}</text>
					<u-icon :name="show?'arrow-up-fill':'arrow-down-fill'"></u-icon>
					<view class="position-box" v-show="show">
						<view class="type-item" @click="changeType(item)" v-for="item in siftTypeList" :key="item.id">
							{{item.text}}
						</view>
					</view>
				</view>
				<u-search bgColor="white" borderColor="#d1d1d1" shape="round" v-model="keyword" placeholder="搜索航线"
					height="35" :showAction="false"></u-search>
			</view>
			<view class="airline-list">
				<view class="airline-item" v-for="item in filterList" :key="item.id">
					<text class="item-type">
						{{siftTypeList[item.type+1].text}}
					</text>
					<view class="item-card" @click="pathGo(item)">
						<view class="item-top">
							<text class="item-title">
								{{item.name}}
							</text>
							<text class="item-date" v-if="item.filterTime!==0">
								{{item.filterTime}} 更新
							</text>
						</view>
						<view class="item-bottom">

							<view class="item-message">
								<view class="item-picture">
									<text>照片</text>
									<text>{{item.img_count}}</text>
								</view>
								<view class="line">

								</view>
								<view class="item-video">
									<text>视频</text>
									<text>{{item.video_count}}</text>
								</view>
								<view class="line">

								</view>
								<view class="item-view">
									<text>全景</text>
									<text>{{item.panorama_count}}</text>
								</view>
							</view>
							<view class="item-image">
								<image :src="siftTypeList[item.type+1].icon" mode=""></image>
							</view>
						</view>

					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		getQueryAirlineRecordFlyResult
	} from "../../api/index.js"
	import {
		mapState
	} from "vuex"
	import {
		filterDate
	} from "../../utils/filterDate.js"
	export default {
		data() {
			return {
				keyword: '',
				type: {
					text: '全部',
					id: -1
				},
				show: false,
				siftTypeList: [{
						text: '全部',
						id: -1
					},
					{
						text: '航线',
						icon: '/static/svg/airline.svg',
						id: 0
					}, {
						text: '全景',
						icon: '/static/svg/full-view.svg',
						id: 1
					}, {
						text: '正射',
						icon: '/static/svg/orthographic.svg',
						id: 2
					}, {
						text: '三维',
						icon: '/static/svg/threeDimensional.svg',
						id: 3
					},
				],
				airlineList: []
			};
		},

		onShow() {
			getQueryAirlineRecordFlyResult(this.mechineEvent.nestId).then(res => {
				console.log(res, 'res')
				const {
					data: {
						data: {
							airlineList
						}
					}
				} = res

				// this.airlineList = JSON.parse(JSON.stringify(airlineList))
				// this.airlineList.map(item => {
				// 	Object.assign(item, {
				// 		filterTime: item.task_max_new_time ? filterDate(item
				// 			.task_max_new_time) : 0
				// 	})
				// })
				this.airlineList = airlineList.map(item => {
					Object.assign(item, {
						filterTime: item.task_max_new_time ? filterDate(item
							.task_max_new_time) : 0
					})
					return {
						id: item.id,
						// exec_record_arr: item.exec_record_arr,
						img_count: item.img_count,
						missionid: item.missionid,
						name: item.name,
						nest_id: item.nest_id,
						panorama_count: item.panorama_count,
						task_max_new_time: item.task_max_new_time,
						type: item.type,
						video_count: item.video_count,
						filterTime: item.filterTime
					}
				})
				this.airlineList = this.airlineList.sort((a, b) => {
					return new Date(b.filterTime) - new Date(a.filterTime)
				})
				console.log(airlineList, 'airlineList')
			}).catch(err => {
				console.log(err, 'err')
			})
		},
		computed: {
			...mapState(["mechineEvent"]),
			filterList() {
				let arr = JSON.parse(JSON.stringify(this.airlineList))
				arr = arr.filter((item) => {
					return this.type.id === -1 ? item.name.includes(this.keyword) : item.name.includes(this
						.keyword) && item.type === this.type.id
				})
				return arr
			}
		},
		methods: {
			async pathGo(item) {
				console.log(item.exec_record_arr, 'item')
				await getQueryAirlineRecordFlyResult(this.mechineEvent.nestId).then(res => {
					let {
						data: {
							data: {
								airlineList
							}
						}
					} = res
					airlineList = airlineList.filter(it => {
						return it.id === item.id
					})
					uni.setStorageSync("exec_record_arr", JSON.stringify(airlineList[0].exec_record_arr))
				})
				await uni.navigateTo({
					url: '/dataOutcomePages/dataDetails/dataDetails'
				})
			},
			changeType(item) {
				this.type = item
			}
		}

	}
</script>

<style lang="scss">
	.outcome {
		margin: 0 40rpx;
		padding-bottom: 40rpx;

		>.search {
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.search-type {
				width: 120rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				margin-right: 20rpx;
				position: relative;

				// >text {
				// 	width: 100rpx;
				// 	text-align: center;
				// }

				.position-box {
					position: absolute;
					top: 50rpx;
					left: 0;
					background-color: white;
					border-radius: 10rpx;
					width: 100%;
					box-shadow: 0px 3px 8px 0px #00000040;
					text-align: center;

					.type-item {
						margin: 20rpx;
					}
				}
			}

		}

		.airline-list {
			width: 100%;
			margin-top: 30rpx;

			.airline-item {
				margin-top: 26rpx;

				.item-type {
					font-size: 24rpx;
					color: white;
					padding: 6rpx 14rpx;
					text-align: center;
					border-radius: 10rpx;
					background-color: $color-blue;
				}

				.item-card {
					margin-top: 10rpx;
					padding: 14rpx 20rpx;
					box-sizing: border-box;
					width: 100%;
					height: 226rpx;
					box-shadow: 0px 3px 8px 0px #00000040;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border-radius: 10rpx;

					.item-top {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.item-date {
						font-size: 24rpx;
					}

					.item-bottom {
						margin-bottom: 6rpx;
						display: flex;
						margin-right: 10rpx;

						.item-image {
							width: 160rpx;
							height: 130rpx;
							display: flex;
							align-items: center;
							justify-content: flex-end;
							// border: solid 1rpx $color-gray;

							image {
								width: 70%;
								height: 70%;
							}
						}

						.item-message {
							flex: 1;
							padding: 0 10rpx 0 30rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: space-between;

							>view {
								display: flex;
								align-items: center;
								height: 94rpx;
								justify-content: space-between;
								flex-direction: column;

								>text:last-child {
									color: $color-gray;
								}
							}

							.line {
								height: 60rpx;
								width: 4rpx;
								background-color: $color-blue;
							}

						}
					}

				}
			}
		}

		.filter-view {
			width: 490rpx;

			.machine-nest {
				display: flex;
				height: 56rpx;
				align-items: center;
				margin-top: 50rpx;

				text {
					margin-left: 10px;
				}

				.machine-select {
					margin: 0 10px;
					flex: 1;
					height: 100%;
					border: 1rpx solid $color-gray;
					position: relative;
					display: flex;
					align-items: center;

					.machine-option {
						position: absolute;
						width: 100%;
						top: 60rpx;
						z-index: 2;
						background-color: white;
						border: 1px solid $color-gray;

						.option-item {
							padding: 10rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}

					>text {
						width: 290rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					image {
						height: 40rpx;
						position: absolute;
						right: 10rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 40rpx;
						transition: .3s;

						&.active {
							transform: translateY(-50%) rotateZ(180deg);
						}
					}
				}
			}
		}

		.control {
			position: fixed;
			bottom: 20rpx;
			display: flex;
			color: white;
			padding: 0 10px;
			width: 490rpx;
			box-sizing: border-box;
			justify-content: space-between;

			.reset-btn {
				width: 160rpx;
				height: 54rpx;
				line-height: 54rpx;
				font-size: 24rpx;
				background-color: $color-blue;
				border-radius: 10rpx;
				text-align: center
			}

			.inquire-btn {
				width: 160rpx;
				height: 54rpx;
				line-height: 54rpx;
				font-size: 24rpx;
				background-color: $color-green;
				border-radius: 10rpx;
				text-align: center
			}
		}
	}
</style>